<script setup>
import { RouterLink,RouterView } from 'vue-router';
</script>

<template>
  <div>
    <h2>vue路由测试</h2>
    <div>
      <!-- 
        当点击首页时,使用指定的class样式selected
      -->
      <RouterLink to="/home" active-class="selected">首页</RouterLink>
      <RouterLink :to="{path: '/user'}" active-class="selected">用户</RouterLink>
      <RouterLink :to="{name: 'sp'}" active-class="selected">商品</RouterLink>
    </div>
    <hr>
    <!-- 展示区 -->
     <div>
      <RouterView></RouterView>
     </div>
  </div>
</template>
<style>
.selected{
  background-color: red;
}
</style>